<template>
    <div class="custom-tree">
        <el-tree ref="tree"
                 :data="data"
                 :props="defaultProps"
                 node-key="id"
                 @node-click="onNodeClick">
            <div slot-scope="{ node, data }" class="custom-node">
                <div>
                    <span class="custom-node-title">{{ node.label }}</span>

                    <span class="custom-node-key">〖ID：{{ node.id }}〗</span>

                    <span class="custom-node-child" v-if="!node.isLeaf">〖子分类数：{{ data.children.length }}〗</span>
                </div>

                <!-- 操作按钮 -->
                <div class="custom-node-action">
                    <el-button type="text" icon="el-icon-plus" @click.stop="onNodeAdd(node, data)">
                        新增子分类
                    </el-button>

                    <el-button type="text" icon="el-icon-edit" @click.stop="onNodeEdit(node, data)">
                        编辑
                    </el-button>

                    <el-button type="text" icon="el-icon-delete" @click.stop="onNodeRemove(node, data)">
                        删除
                    </el-button>
                </div>
            </div>
        </el-tree>
    </div>
</template>

<script>
export default {
    name: 'KClassManager',
    props: {
        data: {
            type: Array,
            default: () => []
        },
        handler: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            defaultProps: {
                label: 'name',
                value: 'id'
            }
        }
    },
    methods: {
        onNodeClick() {},
        onNodeHover() {
            console.log('test')
        },
        // 添加分类
        onNodeAdd(node, data) {},
        /**
         * 编辑
         */
        async onNodeEdit(node, data) {
            if (this.handler.edit) {
                const res = await this.handler.edit(data);
                for (let key in res) {
                    data[key] = res[key];
                }
                console.log('edit', res);
            }
        },
        /**
         * 删除
         * @param node
         * @param data
         * @returns {Promise<void>}
         */
        async onNodeRemove(node, data) {
            try {
                await this.$confirm('该操作不可逆，确定要删除吗?');
                if (this.handler.remove) {
                    await this.handler.remove(data);
                    this.$refs.tree.remove(node);
                }
            } catch (e) {
            }
        }
    }
}
</script>

<style scoped lang="scss">
$pre: custom;
.#{$pre}-tree {
    /deep/ .el-tree-node__content {
        height: 46px;
        line-height: 46px;
    }
}
.#{$pre}-node {
    display: flex;
    width: 100%;
    justify-content: space-between;
    span {
        margin-right: 10px;
        color: #009688;
        font-size: 14px;
    }
    &-title {
        color: #FF5722!important;
    }
    $act: #{&}-action;
    #{$act} {
        opacity: 0;
        transition: all .3s;
    }
    &:hover {
        #{$act} {
            opacity: 1;
        }
    }
}
</style>
